<!-- 添加/编辑 最新动态 -->
<template> 
	<div>
		<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 8 }" @submit="handleSubmit">
			<a-form-item  style='display: none;'>
		      <a-input
		        v-decorator="['code',formset.code ]"
		      />
		    </a-form-item>

		    <a-form-item label="主题图">
		       <imageUpload style='width: 112px;height: 112px' :fileList='fileData' v-on:uploading='($event)=>{fileData = $event}' v-on:removeFile='(e)=>removeFile(e)' v-on:uploadSuccess='(file,fileList)=>uploadSuccess(file,fileList)'></imageUpload> 
             	<a-input   style='display: none;'  v-decorator="['bgImageFileCode' ,formset.bgImageFileCode]" placeholder='hide'/>
		    </a-form-item> 
		    <a-form-item label="主题名称">
		       <a-input   
		        v-decorator="['title', formset.title ]"
		      /> 
		    </a-form-item> 
		    <a-form-item label="主题描述">
		       <a-input  
		        v-decorator="['description', formset.description ]"
		      />
		    </a-form-item>  

		    <!-- 表单中的按钮，与表单项样式一致 -->
		    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
			    <a-button @click="addButton"  type='dashed'>详情链接设置</a-button> 
			</a-form-item>
			
			<!-- 在表单中显示已编辑完成的内容，隐藏提交的表单域 -->
		    <a-form-item label="按钮文字"> 
				<a-button style='border-radius: 17px' v-if='form.getFieldValue("textColor") ==0'>{{form.getFieldValue("btnText") }}</a-button>
	    		<a-button style='border-radius: 17px;background-color: #000;color: #fff' v-if='form.getFieldValue("textColor") ==1'>{{form.getFieldValue("btnText")}}</a-button>  


	    		<a-input-group compact  style='display: none;'>
				    <a-input  style='width: 200px;'
				        v-decorator="['btnText', formset.btnText ]"
				    />
				    <a-select v-decorator="['textColor', formset.textColor ]">
				    	<a-select-option value='0'>白底黑字</a-select-option>
				    	<a-select-option value='1'>黑底白字</a-select-option>
				    </a-select>
				</a-input-group>
		    </a-form-item> 
		    <a-form-item label='详情链接内容'>
		    	{{btnSetting.detail | btnSettingType}}
		    	<a-input style='display: none;' v-decorator="['clickUrl',formset.clickUrl]" />
		    </a-form-item> 
		    <a-form-item  :label='btnSetting.detail==0 ? "商品主题列表":"商品"' >
		    	 {{btnSetting.detailName}}
		    	 <a-input  style='display: none;' v-decorator="['themeCode',formset.themeCode]" />
		    </a-form-item> 
		    <a-form-item label='是否展示在列表中'>
		    	<a-switch  v-decorator="['showFlag',formset.showFlag]"  @change="onChange" />
		    </a-form-item>
		                                                  
		    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
		      <router-link  to='/miniproHomeSetting'><a-button  class='mr20'> 取消 </a-button></router-link>
		      <a-button type="primary" html-type="submit"> 提交 </a-button>
		    </a-form-item>
		</a-form>   
		<!-- 按钮设置modal -->
 		<btnSetting  ref='btnSettingModal' :visible='btnVisible' v-on:ok='btnEditFinished' v-on:cancel='btnVisible=false'> </btnSetting> 
	</div>
</template>

<script >  
	import  imageUpload from  '@/components/common/imageUpload' //上传单个图片文件
	import  selfEditor from '@/components/common/selfEditor' //自定义模块编辑--未完成
	import  btnSetting  from  '@/components/minipro/HomeSetting/btnSetting' //按钮设置modal

	import  { submit_latest_news,get_activeModal }  from  '@/api/minipro/HomeSetting'
	import  { getCommodity } from '@/api/minipro/commodity'
	export default{
		name:'addActiveModal',
		data(){
			return {
				_isEdit:false, 
				 
				formset:{//7
					code:{ initialValue:''},
					bgImageFileCode:{ initialValue:'', rules: [{ required: true, message: '请上传' }],},  
					title:{ rules: [{ required: true, message: '请输入' }],initialValue:'' },
					description:{ rules: [{ required: true, message: '请输入' }],initialValue:'' },
					btnText:{ rules: [{ required: true, message: '请输入' }] ,initialValue:''},
					textColor:{ rules: [{ required: true, message: '请输入' }] ,initialValue:''},  
					clickUrl:{ initialValue:''},
					themeCode:{ initialValue:'' },
					showFlag:{ valuePropName:'checked',initialValue:true },
				},
				
				btnVisible:false,/*按钮链接内容设置*/  
				fileData:[],/*图片返回*/ 
				btnSetting:{ },/*按钮内容*/ 
			}
		},
		created(){
			if(!!this.$route.query.code){
				this._isEdit = true
				this.pageInit(this.$route.query.code)
			} 
		},
		beforeCreate () {
		    this.form = this.$form.createForm(this);
		},
		methods:{ 
			pageInit(code){
				get_activeModal(code).then((res)=>{
					let data = res.data.data

					//表单初始值设置
					Object.keys(this.formset).forEach((item)=>{
						if(item == 'showFlag'){
							this.formset[item].initialValue = Number(data[item]) /*Boolean(0) Boolean('0')**/
							return
						}
						this.formset[item].initialValue = data[item]
					})


					//图片文件
					this.fileData = [{uid:data.bgImageFileCode,code:data.bgImageFileCode,status:'done',url:process.env.BASE_API + '/op/fileupload/download_file?fileCode=' + data.bgImageFileCode}]
					//链接详情内容、显示
					this.btnSetting.detail = data.clickUrl   
					getCommodity(data.themeCode).then((res)=>{//主题名称未在当前接口返回，需请求详情得到
						let data = res.data.data
						this.$set(this.btnSetting,'detailName',data.themeName)/*多次ajax请求后数据渲染无效*/ 
					})

				})
			},

			/*
				提交表单
			*/
			handleSubmit(e){
				let url  = this._isEdit == false ? '/sys/latest_news/create_latest_news' : '/sys/latest_news/modify_latest_news' ;//新增、修改  最新动态

				e.preventDefault(); 
		      	this.form.validateFields((err, values) => {
		        	if (!err) {
		        		values.showFlag = Number(values.showFlag) //规定form-field值的类型
		               	console.log('Received values of form: ', values);
 						 
			            submit_latest_news(url,values).then((res)=>{ 
			                this.$message.success(res.data.msg) 
			                this.$router.push('/miniproHomeSetting')
			            })
			        }
			        else{
			            console.log(err) 
		        	} 
		      	});
			},

			  
			/*
			  移除图片，关联表单项设置
			*/
		    removeFile(e){ 
		      this.removeFile_fromList(e,this.fileData)   
		      this.form.setFieldsValue({['bgImageFileCode']:''}) //重置绑定表单项的值
		    },
		    /*
				图片上传成功，关联表单项设置
		    */
		    uploadSuccess(file,fileList){ 
		      this.form.setFieldsValue({['bgImageFileCode']:file.response.data.code }) //重置绑定表单项的值
		    },


		    /*
				编辑按钮
		    */
		    addButton(){
		    	this.btnVisible=true 
		    	if(this._isEdit == true){
		    		this.$refs.btnSettingModal.$emit('openDialog',this.form.getFieldsValue()) 
		    	} 
		    },
		    /*
				完成按钮设置
		    */
		    btnEditFinished(arg){
		    	this.btnVisible = false
		    	 
		    	this.form.setFieldsValue({
		    		'btnText'   : arg.btnText,
		    		'textColor' : arg.textColor,
		    		'clickUrl'  : arg.clickUrl,
		    		'themeCode' : arg.commodity.key
		    	}) 

		    	//展示
		    	this.btnSetting.detail = arg.clickUrl
		    	this.btnSetting.detailName = arg.commodity.label  

		    } 
			 
		},
		components:{ 
			selfEditor,
			imageUpload,
			btnSetting, 
		} 	
		    
	}
	
</script>